<template>
  <div class="gg">
    <div class="gg-near">
      <ul>
        <li v-for="(item, index) in getNearAdvertis" :key="index">
          <router-link :to="'/product/detail?shopid=' + item.id">
            <el-image fit="cover" :src="item.imgurl"></el-image>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="gg-behind">
      <ul>
        <li
          v-for="(item, index) in getBehindAdvertis"
          :key="index"
          :class="index > 2 ? 'li-bm' : ''"
        >
          <router-link :to="'/product/detail?shopid=' + item.id">
            <el-image fit="cover" :src="item.imgurl"></el-image>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.gg {
  height: 372px;
  display: flex;
  ul {
    list-style-type: none;
    overflow: hidden;
  }
  .gg-near {
    min-width: 580px;
    li {
      margin-right: 15px;
      width: 269px;
      height: 370px;
      float: left;
      overflow: hidden;
      cursor: pointer;
    }
  }
  .gg-behind {
    margin-left: 22px;
    li {
      float: left;
      width: 180px;
      height: 180px;
      margin-left: 15px;
      overflow: hidden;
      cursor: pointer;
    }
    .li-bm {
      margin-top: 9px;
    }
  }
  li:hover {
    opacity: 0.6;
    transition: all 0.6s;
  }
}
</style>

<script>
export default {
  props: {
    // 8个推荐商品（广告）
    advertis: { type: Array, default: null }
  },
  computed: {
    getNearAdvertis () {
      if (this.advertis.length === 0) return []
      return [this.advertis[0], this.advertis[1]]
    },
    getBehindAdvertis () {
      if (this.advertis.length === 0) return []
      return this.advertis.filter((item, index) => index > 1)
    }
  }
}
</script>

<style>
</style>
